<template>
    <div>
        <el-page-header @back="back" content="详情页面">
        </el-page-header>
        <div style="width: 1024px;">
            <h4>任务详情</h4>
            <el-row>
                <el-col :span="2">群发员工：</el-col>
                <el-col :span="10">预计发送{{rowId.empNum}}个客户</el-col>
                <el-col :span="2">群发类型：</el-col>
                <el-col :span="10">客户群群发</el-col>
            </el-row>
            <el-row>
                <el-col :span="2">发送时间：</el-col>
                <el-col :span="10">{{rowId.sendTime}}</el-col>
                <el-col :span="2">发送状态：</el-col>
                <el-col :span="10">{{rowId.sendStatus}}</el-col>
            </el-row>
            <el-row>
                <el-col :span="2">群发内容：</el-col>
                <el-col :span="10">{{rowId.groupMessage}}</el-col>
            </el-row>

            <el-row>
                <el-col :span="6">
                    <div class="center">
                        <p>0</p>
                        已发群主
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="center">
                        <p>0</p>
                        已发群聊
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="center">
                        <p>1</p>
                        未送达群聊
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="center">
                        <p>1</p>
                        未发送群主
                    </div>
                </el-col>
            </el-row>
        </div>
        <div>
            <el-tabs v-model="activeName" type="card">
                <el-tab-pane label="客户群接收详情" name="first">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item>
                            <el-input v-model="formInline.name" placeholder="请输入群聊"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="formInline.region" placeholder="请选择群主">
                                <el-option label="群主一" value="shanghai"></el-option>
                                <el-option label="群主二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="formInline.type" placeholder="请选择送达状态">
                                <el-option label="未发送" value="shanghai"></el-option>
                                <el-option label="已发送" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                            <el-button>重置</el-button>
                        </el-form-item>
                    </el-form>
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column prop="clientGroupName" label="群聊名称">
                        </el-table-column>
                        <el-table-column prop="empName" label="群主">
                        </el-table-column>
                        <el-table-column prop="status" label="消息送达状态">
                        </el-table-column>
                        <el-table-column prop="createTime" label="群聊创建时间">
                        </el-table-column>
                        <el-table-column label="操作">
                            <el-button type="text">详情</el-button>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="群主发送详情" name="second">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item>
                            <el-select v-model="formInline.region" placeholder="请选择群主">
                                <el-option label="群主一" value="shanghai"></el-option>
                                <el-option label="群主二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="formInline.type" placeholder="请选择送达状态">
                                <el-option label="未发送" value="shanghai"></el-option>
                                <el-option label="已发送" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                            <el-button>重置</el-button>
                        </el-form-item>
                    </el-form>
                    <el-table :data="groupData" style="width: 100%">
                        <el-table-column prop="empName" label="群主">
                        </el-table-column>
                        <el-table-column prop="status" label="发送状态">
                        </el-table-column>
                        <el-table-column prop="yingfa" label="应发送群聊数">
                        </el-table-column>
                        <el-table-column prop="shiji" label="实际发送群聊数">
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    export default {
        name: "BatchDetail",
        props: {
            rowId: {
                type: Object,
                default() {}
            },
        },

        data() {
            return {
                activeName: 'first',
                formInline: {
                    name: '',
                    region: '',
                    type: ''
                },
                tableData: [{
                    name: '大客户群',
                    people: '王虎',
                    status: '未发送',
                    createTime: '2021-01-01 15:15:00'
                }],
                groupData: []
            }
        },

        mounted(){
            this.queryDataHandle()
        },
        methods: {

            queryDataHandle() {
                let that = this
                this.$request("/api/custGroup/selectById/1_0", this.rowId.groupId, "POST").then((data) => {
                    that.tableData = data.rows
                    that.tableData.status = that.rowId.sendStatus
                })
            },

            back() {
                this.$emit("currentHandler", "list")
            },
            onSubmit() {

            },
        }
    }
</script>

<style scoped>
    .el-row {
        margin: 10px 0;
    }

    .center {
        text-align: center;
    }

    .center p {
        font-size: 30px;
        color: #409eff;
    }
</style>
